<template>
    <div class="list">
        <!-- 头部搜索 -->
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <i-button type="info" @click="addSms">
                        <i class = "iconfont icon-add" style="font-size:12px;margin-right:5px"></i>
                    </i-button>
                </div>
                <div class="margin-up-down">
                    <Select v-model="filterObj.hospitalId" style="width:200px" placeholder="机构名称" clearable>
                        <Option v-for="item in hospitalist" :value="item.id" :key="item.id">{{item.orgName}}</Option>
                    </Select>
                </div>
                <div class="margin-up-down">
                   <i-button type="primary" icon="ios-search" @click="handleSearch" class="btn"></i-button>
                   <i-button @click="Reset" class="btn">
                       <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                    </i-button>
                </div>
            
            </Col>
        </Row>
        <!-- 列表 -->
        <div class="table">
            <Table
                border
                size="small" 
                :columns="columns" 
                :data="data"
                no-data-text="未查询到符合条件的记录"
                stripe>
            </Table>
            <div class="page">
                <Page :total="count" :current='filterObj.pageNo' :page-size="filterObj.pageSize" show-total show-elevator @on-change="changePage" />
            </div>
        </div>
        <!-- 删除确认弹窗 -->
        <Modal
            v-model="showDelConfirmModal"
            title="短信模板通道"
            class="drugmanagement-commondrug-list-delModal">
            <p>删除后不可恢复，确认删除所消息配置吗？</p>
            <div slot="footer" class="buttonbox">               
                <Button class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                </Button>
                <Button class="cancel-btn btn" @click="showDelConfirmModal = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </div>
        </Modal>
        <!--添加机构消息配置模板-->
        <Modal
            v-model="modalStatus"
            :title="modalTitle"
            :mask-closable='false'
            footer-hide
            width='500'>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                <FormItem label="机构名称：" prop="hospitalId">
                    <Select v-model="formValidate.hospitalId" style="width:250px" placeholder="请选择机构名称">
                        <Option v-for="item in hospitalist" :value="item.id" :key="item.id" style='text-align:center;'>{{item.orgName}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="账户：" prop="smsKey">
                    <Input v-model="formValidate.smsKey" placeholder="请输入账户" style='width:250px;' maxlength="60"></Input>
                </FormItem>
                <FormItem label="密码：" prop="smsSecret">
                    <Input v-model="formValidate.smsSecret" placeholder="请输入密码" style='width:250px;' maxlength="60"></Input>
                </FormItem>
                <FormItem label="签名：" prop="signName">
                    <Input v-model="formValidate.signName" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入短信签名" maxlength="20" style='width:250px;'></Input>
                </FormItem>
                <FormItem label="消息配置：" prop="type">
                    <Select v-model="formValidate.type" style="width:250px" placeholder="请选择消息配置">
                        <Option value="1" key="1" style='text-align:center;'>阿里云</Option>
                    </Select>
                </FormItem>
                <FormItem style="width:300px;text-align:center;">
                    <Button type="primary" @click="handleSubmit('formValidate')" :disabled='disabledSave' style="width:75px;height:35px">
                        <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                    </Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">
                        <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                    </Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import api from "@/api/commonApi";
    const filterObj = {
        pageNo: 1,
        pageSize: '10',
        hospitalId: ''
    };
    export default {
    data() {
        return {
        filterObj: this.deepClone(filterObj),
        count: 0,
        delBtnLoading: false,
        columns: [
            {type: 'sum', title: '排序', width: 80, align: 'center',
                render: (h, params) => {
                    let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
                    return h("span", sum);
                }
            },
            {title:"机构名称", key:"hospitalName",width: 200, align: "center"},
            {title:"账户", key:"smsKey", align: "center"},
            {title:"密码",key: "smsSecret", align: "center"},
            {title:"签名",key: "signName", align: "center"},
            {
                title: "设置",
                key: "operate",
                width: 240,
                align: "center",
                render: (h, params) => {
                    return h('div',[
                        h('span', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                margin: '0px 6px',
                                color: '#5362e1'
                            },
                            on: {
                                click: () => {
                                    this.modalStatus = true;
                                    this.modalTitle = '编辑消息配置'
                                    this.$axios.post(api.findSmsById,{id: params.row.id}).then(res => {
                                    if (res.data.code === 1) {
                                        let formdata = res.data.object
                                        this.formValidate = {
                                            id:formdata.id,
                                            smsKey:formdata.smsKey,
                                            smsSecret:formdata.smsSecret,
                                            hospitalId:formdata.hospitalId,
                                            signName:formdata.signName,
                                            type:formdata.type
                                        }
                                    } else {
                                        this.$Message.error(res.data.message);
                                        return false;
                                    }
                                    }).catch(() => {
                                        this.modalStatus = false;
                                    });
                                }
                            }
                        }, '编辑'),
                        '|',
                        h('span', {
                            props: {
                                size: 'small'
                            },
                            style: {
                                margin: '0px 6px',
                                color: '#21c780'
                            },
                            on: {
                                click: () => {
                                    this.functionJS.queryNavgationTo(this, '/index/configuration/message/shortMessage',{
                                    });
                                    sessionStorage.setItem("hospitalId",params.row.hospitalId)
                                }
                            }
                        }, '模板维护'),
                        '|',
                        h('span', {
                            props: {
                                type:"error",
                                size: 'small'
                            },
                            style: {
                                margin: '0px 6px',
                                color: '#fc6c49'
                            },
                            on: {
                                click: () => {
                                    this.handleRemove(params)
                                }
                            }
                            }, '删除')
                        ]);
                    }
                },
            ],
        data: [],
        showDelConfirmModal: false,
        showEditConfirmModal: false,
        curRecord: {},
        formValidate: {
            smsKey: "",
            smsSecret: "",
            hospitalId: "",
            signName: "",
            type: "1"
        },
        ruleValidate:{
            hospitalId: [{ required: true, message: '请选择机构名称',trigger: 'change' }],
            smsKey: [{ required: true, message: '请输入账户名称', trigger: 'blur' }],
            smsSecret:[{ required: true, message: '请输入账户密码', trigger: 'blur' }],
            signName: [{ required: true, message: '请输入签名', trigger: 'blur' }],
            type: [{ required: true, message: '请选择消息配置类型', trigger: 'change'}]
        },
        formInline: {
            user: '',
            password: ''
        },
        modalStatus: false,
        modalTitle :"添加短信模板通道",
        hospitalist:[],
        disabledSave: false
        }
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "",
                title: "消息模板配置"
            },
            {
                path: "/index/configuration/message/list",
                title: "短信模板通道配置"
            }
        ];
        this.$emit("changeBreadList", breadList);
        this.$axios.post(api.management,{}).then(res => {
            if(res.data.code == 1){
                this.hospitalist = res.data.object
            }else{
                this.$Message.error('请求异常');
                return false;
            }
        });
        this.hospitalsmspage()
    },
    mounted() {
    },
    methods: {
        //添加按钮
        addSms(){
            this.modalStatus = true;
            this.modalTitle = '添加短信模板通道'
            this.formValidate.id = ''
            this.formValidate.smsKey = ''
            this.formValidate.smsSecret = ''
            this.formValidate.hospitalId = ''
            this.formValidate.signName = ''            
        },
        //列表检索
        handleSearch() {
            if(this.filterObj.hospitalId == '' || this.filterObj.hospitalId == null){
                this.$Message.error('请您选择机构后查询');
                return false;
            }else{
                this.filterObj.pageNo = 1;
                this.hospitalsmspage()
            }
        },
        //清空条件
        Reset(){
            if(!this.filterObj.hospitalId){
                this.$Message.error('请您选择机构后重置');
            }else{
                this.filterObj.hospitalId = null
                this.hospitalsmspage()
            }
        },
        handleReset (name) {
            this.modalStatus = false;
            this.$refs[name].resetFields();
            this.formValidate.smsKey = ''
            this.formValidate.smsSecret = ''
            this.formValidate.hospitalId = ''
            this.formValidate.signName = ''
            this.formValidate.type = ''
        },
        handleEdit(record) {
            this.curRecord = record.row;
            this.showEditConfirmModal = true;
        },
        handleRemove(record) {
            this.curRecord = record.row;
            this.showDelConfirmModal = true;
        },
        handleDel() {
            this.delete();
        },
        changePage(index) {
            this.filterObj.pageNo = index;
            this.hospitalsmspage()
        },
        //消息配置-列表
        hospitalsmspage(){
            this.$axios.post(api.findSmsPageList,this.filterObj).then(res => {
                if (res.data.code === 1) {
                    const ret = res.data.object.records;
                    this.data = ret || [];
                    this.count = res.data.object.total;
                    if (!ret || !ret.length) {
                        this.$Message.info('未查询到符合条件的记录')
                    }
                } else {
                    this.$Message.error('请求异常');
                    return false;
                }
            }).catch(() => {

            });
        },
        //消息配置-删除
        delete() {
            this.delBtnLoading = true;
            this.$axios.post(api.delSms,{id: this.curRecord.id}).then(res => {
                this.delBtnLoading = false;
                if (res.data.code === 1) {
                    this.$Message.success('删除成功');
                    this.showDelConfirmModal = false;
                    this.hospitalsmspage(1)
                } else {
                    this.$Message.error({content: res.data.message});
                    return false;
                }
            }).catch(() => {
                this.delBtnLoading = false;
            });
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        },
        // 保存按钮
        handleSubmit(name){
            this.disabledSave = true
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let params = {
                        smsKey: this.formValidate.smsKey,
                        smsSecret: this.formValidate.smsSecret,
                        hospitalId: this.formValidate.hospitalId,
                        signName: this.formValidate.signName,
                        type: this.formValidate.type,
                    }
                    if(this.formValidate.id){
                        params.id = this.formValidate.id
                    }
                    this.hospitalist.forEach(i =>{
                        if(this.formValidate.hospitalId == i.id){
                            params.hospitalName = i.orgName
                        }
                    })
                    this.$axios.post(api.saveSms,params).then(res => {
                        if(res.data.code == 1) {
                            this.handleReset('formValidate')
                            this.hospitalsmspage(1)
                            this.$Message.success('保存成功')
                            setTimeout(() => {
                                this.disabledSave = false
                            }, 1000);
                        } else {
                            this.$Message.error(res.data.message)
                            this.disabledSave = false
                        }
                    }).catch(() => {
                    });
                } else {
                    this.$Message.error('请完整填写必填项!');
                    setTimeout(() => {
                        this.disabledSave = false
                    }, 1000);
                }
            })
        },
    },
    watch: {
        'filterObj.pageSize'(nv, ov) {
            this.filterObj.pageNo = 1;
            this.hospitalsmspage();
        },
    }
}
</script>
<style scoped lang="less">
.list {
    width: 100%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        width: 51px;
        height: 32px;
    }
    .page{
        text-align: center;
        margin-top: 20px;
    }
}
.buttonbox {
    text-align: center;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>